<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>蓝金融在线-个人信息</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome = 1">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<link rel="stylesheet" rel="stylesheet" href="newcss/base/reset.min.css">
<link rel="stylesheet" href="newcss/layout/grid.css">
<link rel="stylesheet" href="newcss/helper/utils.css">
<link rel="stylesheet" href="newcss/layout/header.css">
<link rel="stylesheet" href="newcss/layout/footer.css">
<link rel="stylesheet" type="text/css" href="newcss/component/center-header.css" />
<link rel="stylesheet" type="text/css" href="newcss/page/center.css" />
<link rel="stylesheet" type="text/css" href="newjs/vendor/webuploader/style.css" />
<link rel="stylesheet" type="text/css" href="newjs/vendor/webuploader/webuploader.css" />
</head>
<body>
<!-- begin · header -->
      <header class="unselectable bo-header">

        <!-- begin · top bar -->
        <div class="clearfix bo-topbar">
          <div class="row">
            <a class="left hover-link btn-call" href="tel:400-8009-088">400&nbsp;-&nbsp;8009&nbsp;-&nbsp;088</a>
            <a class="left hover-link btn-send-mail" href="mailto:blue-online@superwhale.cn">blue-online@superwhale.cn</a>
            <a class="right hover-link btn-register" href="#">注册</a>
            <a class="right hover-link btn-login" href="#">登录</a>
          </div>
        </div>
        <!-- end · top bar -->
        
        <div class="center-header">
          <div class="wrapper">            
            <div class="logo"><img src="newimages/center/logo.png" /></div>
            <ul>
              <li>首页</li>
              <li class="setting">账户设置<i></i></li>
              <li class="msg">消息<i></i><span class="count">3</span></li>
            </ul>
            <div class="search-box">
              <input type="text" value="" /><i><a href="">搜索</a></i>
            </div>
          </div>
        </div>

      </header>
    <!-- end · header -->

<div class="user-center clearfix">
  <dl class="uc-nav">
    <dt>设置</dt>
    <dd>
      <ul>
        <li class="cur"><a href="center-info.html">个人信息</a><i></i></li>
        <li><a href="center-safe.html">账户安全</a><i></i></li>
        <li><a href="center-address.html">收货地址</a><i></i></li>
        <li><a href="center-order.html">我的订单</a><i></i></li>
        <li><a href="center-favor.html">我的关注</a><i></i></li>
        <li><a href="center-consult.html">咨询回复</a><i></i></li>
        <li><a href="center-report.html">系统公告</a><i></i></li>
      </ul>
    </dd>
  </dl>
  <div class="uc-content">
    <ul class="uc-tabs">
      <li class="cur">基本信息</li>
      <li>头像照片</li>
      <li class="last">更多个人信息</li>
    </ul>
    <div class="uc-table cur clearfix">
      <form id="form-baseinfo" action="">
        <table>
          <tr>
            <td class="td-left"><em>*</em>昵称：</td>
            <td><input type="text" name="nickname" class="input" required minlength="2" data-msg-minlength="至少输入2个字符"  /></td>
          </tr>
          <tr>
            <td class="td-left"><em>*</em>性别：</td>
            <td>
              <label><input type="radio" name="sex" value="0" required />男</label>
              <label><input type="radio" name="sex" value="1" />女</label>   
              <label><input type="radio" name="sex" value="2" />保密</label>
              <label for="sex" class="error"></label>  
            </td>
          </tr>
          <tr>
            <td class="td-left">生日：</td>
            <td id="select-birthday"></td>
          </tr>
          <tr>
            <td class="td-left">邮箱：</td>
            <td><input name="email" class="input" type="email" />&nbsp;<a href="javascript:void()">立即验证</a></td>
          </tr>
          <tr>
            <td class="td-left"><em>*</em>真实姓名：</td>
            <td><input type="text" name="realname" class="input" required minlength="2" data-msg-minlength="至少输入2个字符" /></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><button class="submit save-baseinfo">提交</button></td>
          </tr>
        </table>
      </form>
    </div>
    <!--头像照片-->
    <div class="uc-photo clearfix">
      <div class="photo-left" id="uploader">
        <div class="select-img" id="filePicker">
          <i></i>选择您要上传的头像
        </div>
        <div class="select-remain">仅支持JPG、GIF、PNG、JPEG、BMP格式，文件小于4M</div>
        <div class="bigimg-container" id="fileList"></div>
        <div class="submit-container">
          <a href="javascript:void(0)" class="submit save-photo disabled">提交</a>
        </div>        
      </div>
      <div class="photo-right">
          <div class="preview-title">效果预览</div>
          <div class="preview-remain">你上传的图片会自动生成2种尺寸，请注意小尺寸的头像是否清晰</div>
          <div class="preview-img100">
            <img src="newimages/center/bigimg-temp-1.jpg" class="img" />
            <p>100*100像素</p>
          </div>
          <div class="preview-img50">
            <img src="newimages/center/bigimg-temp-1.jpg" class="img" />
            <p>50*50像素</p>
          </div>
      </div>
    </div>
    <!--更多个人信息-->
    <div class="uc-table clearfix">
      <form id="form-more" action="">
      <table>
        <tr>
          <td class="td-left">婚姻状况：</td>
          <td>
            <label><input type="radio" name="marry" value="0" />未婚</label>
            <label><input type="radio" name="marry" value="1" />已婚</label>    
            <label><input type="radio" name="marry" value="2" />保密</label>    
          </td>
        </tr>
        <tr>
          <td class="td-left">月收入：</td>
          <td>
            <select name="money">
              <option value="0">请选择</option>
              <option value="1">5000以内</option>
              <option value="2">5000~10000</option>
              <option value="3">10000~20000</option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="td-left">身份证号码：</td>
          <td><input type="text" name="card" required class="input" isIdCardNo="true" /></td>
        </tr>
        <tr>
          <td class="td-left">教育程度：</td>
          <td>
            <select name="educate">
              <option value="0">请选择</option>
              <option value="1">中专以下</option>
              <option value="2">中专</option>
              <option value="3">大专</option>
              <option value="4">本科</option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="td-left">所在行业：</td>
          <td>
            <select name="industry">
              <option value="0">请选择</option>
              <option value="1">公务员</option>
              <option value="2">教师</option>
              <option value="3">工程师</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><button class="submit save-more">提交</button></td>
        </tr>
      </table>
      </form>
    </div>
  </div>
</div>

<!-- begin · footer -->
      <footer class="unselectable bo-footer">
        <div class="row relative">

          <ul class="absolute clearfix bo-ul-1">
            <li class="left no-padding-left">
              <a class="hover-link" href="#">关于蓝金融在线</a>
            </li>
            <li class="left">
              <a class="hover-link" href="#">关于蓝金融众筹</a>
            </li>
            <li class="left">
              <a class="hover-link" href="#">关于蓝金融钱包</a>
            </li>
            <li class="left">
              <a class="hover-link" href="#">联系我们</a>
            </li>
            <li class="hover-link left no-padding-right no-border">
              <a class="hover-link" href="#">免责声明</a>
            </li>
          </ul>

          <ul class="absolute clearfix bo-ul-2">
            <li class="left no-padding-left bo-li-contact-us relative">
              联系我们
              <span class="absolute">(9:00 - 22:00)</span>
            </li>
            <li class="left">
              <a class="hover-link bo-online-customer-service" href="#">在线客服</a>
            </li>
            <li class="left no-padding-right no-border">
              <a class="hover-link bo-mail-customer-service" href="mailto:blue-online@superwhale.cn">客服邮箱</a>
            </li>
          </ul>

          <ul class="absolute clearfix bo-ul-3">
            <li class="left no-padding-left">Copyright © 2004-2015 蓝金融在线.com 版权所有</li>
            <li class="left no-padding-right no-border">投资有风险，购买需谨慎</li>
          </ul>

          <ul class="absolute clearfix bo-ul-4">
            <li class="no-padding-left left no-border">
              <a class="hover-link relative" href="tel:400 098 8511">
                400 098 8511
                <span class="absolute">（个人业务）</span>
              </a>
            </li>
            <li class="hover-link left no-border  no-padding-right">
              <a class="hover-link relative" href="tel:400 098 8511">
                400 098 8511
                <span class="absolute">（个人业务）</span>
              </a>
            </li>
          </ul>

        </div>
      </footer>
    <!-- end · footer -->

<script src="newjs/jquery.js"></script>
<script src="newjs/center/birthday.js"></script>
<script src="newjs/ECar.tab.js"></script>
<script src="newjs/jquery.validate.min.js"></script>
<script src="newjs/vendor/webuploader/webuploader.min.js"></script>
<script>
var options= {
    navNode: '.uc-tabs li',
    curNavCls:'cur',
    pannelNode: '.uc-table,.uc-photo',
    curPannelCls:'cur',
    preNode: '',
    nextNode: '',
    duration: 0,
    event: 'click',
    navMaskNode: '',
    navMaskCssObject:null,
    curMaskNavCssObject:null
};
ECar.tab(options);

$(function(){
  $("#form-baseinfo").validate({
    submitHandler: function() {
      var nickname = $("#form-baseinfo input[name='nickname']");
      var sex = $("#form-baseinfo input[name='sex']");
      var realname = $("#form-baseinfo input[name='realname']");
      var birthday = $("#form-baseinfo input[name='birthday']");
      if(birthday == "-1") birthday = "";
      var email = $("#form-baseinfo input[name='email']");

      $.ajax({
        url:"center-info.htm",
        type:'POST',
        dataType: 'json',
        data:{
          nickname : nickname,
          sex : sex,
          realname : realname,
          birthday : birthday,
          email : email
        },
        success:function(response){
          if(response != ""){
            alert('success')
          }
        },
        error:function(){
          alert('error')
        }
      });
    }
  });
  $("#form-more").validate({
    submitHandler: function(){
      var marry = $("#form-more input[name='marry']");
      var money = $("#form-more input[name='money']");
      var card = $("#form-more input[name='card']");
      var educate = $("#form-more input[name='educate']");
      var industry = $("#form-more input[name='industry']");

      $.ajax({
        url:"center-info.htm",
        type:'POST',
        dataType: 'json',
        data:{
          marry : marry,
          money : money,
          card : card,
          educate : educate,
          industry : industry
        },
        success:function(response){
          if(response != ""){
            alert('success')
          }
        },
        error:function(){
          alert('error')
        }
      });
    }
  });

  var BASE_URL = "newjs/vendor/webuploader";
  // 初始化Web Uploader
  var uploader = WebUploader.create({

      // 选完文件后，是否自动上传。
      auto: false,

      // swf文件路径
      swf: BASE_URL + '/Uploader.swf',

      // 文件接收服务端。
      server: 'http://webuploader.duapp.com/server/fileupload.php',

      // 选择文件的按钮。可选。
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.
      pick: '#filePicker',

      // 只允许选择图片文件。
      accept: {
          title: 'Images',
          extensions: 'gif,jpg,jpeg,bmp,png',
          mimeTypes: 'image/*'
      },
      fileNumLimit: 1,
      fileSizeLimit: 15 * 1024 * 1024,    // 15 M
      fileSingleSizeLimit: 3 * 1024 * 1024    // 3 M
  });

  $(".save-photo").on('click', function() {
      if ( $(this).hasClass( 'disabled' ) ) {
          return false;
      }
      uploader.upload();
  });

  // 当有文件添加进来的时候
  uploader.on( 'fileQueued', function( file ) {
      var $li = $(
              '<div id="' + file.id + '" class="file-item thumbnail">' +
                  '<img>' +
                  '<div class="info">' + file.name + '</div>' +
              '</div>'
              ),
          $img = $li.find('img');

      $list = $('#fileList');
      // $list为容器jQuery实例
      $list.html( $li );

      // 创建缩略图
      // 如果为非图片文件，可以不用调用此方法。
      // thumbnailWidth x thumbnailHeight 为 100 x 100
      uploader.makeThumb( file, function( error, src ) {
          if ( error ) {
              $img.replaceWith('<span>不能预览</span>');
              return;
          }

          $img.attr( 'src', src );
          $(".save-photo").removeClass("disabled");
      }, 217, 217 );
  });

  // 文件上传过程中创建进度条实时显示。
  uploader.on( 'uploadProgress', function( file, percentage ) {
      var $li = $( '#'+file.id ),
          $percent = $li.find('.progress span');

      // 避免重复创建
      if ( !$percent.length ) {
          $percent = $('<p class="progress"><span></span></p>')
                  .appendTo( $li )
                  .find('span');
      }

      $percent.css( 'width', percentage * 100 + '%' );
  });

  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  uploader.on( 'uploadSuccess', function( file ) {
      $( '#'+file.id ).addClass('upload-state-done');
  });

  // 文件上传失败，显示上传出错。
  uploader.on( 'uploadError', function( file ) {
      var $li = $( '#'+file.id ),
          $error = $li.find('div.error');

      // 避免重复创建
      if ( !$error.length ) {
          $error = $('<div class="error"></div>').appendTo( $li );
      }

      $error.text('上传失败');
  });

  // 完成上传完了，成功或者失败，先删除进度条。
  uploader.on( 'uploadComplete', function( file ) {
      $( '#'+file.id ).find('.progress').remove();
  });
})

</script>
<!--[if lte IE 9]>
<script type="text/javascript" src="newjs/placeholder.js" ></script>
<![endif]-->
</body>
</html>
